<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="21">
        <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">订单详情</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">订单状态</p>
          </template>
          <el-descriptions-item label="订单编号">
            <span v-text="info.orderNum" />
          </el-descriptions-item>
          <el-descriptions-item label="放款状态">
            <dict-tag :options="dict.type.loan_info_credit_status" :value="info.creditStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="审核结果">
            <dict-tag :options="dict.type.loan_info_applicant_status" :value="info.applicantStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="利率/年">
            <span v-text="(info.monRate*1200).toFixed(1)" />%
          </el-descriptions-item>
          <el-descriptions-item label="应放款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="手续费">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="居间服务费">
            <span v-text="(info.servCharge*100).toFixed(1)" />%
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">产品信息</p>
          </template>
          <el-descriptions-item label="产品名">
            <span v-text="info.productionName" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款支付给">
            <span v-text="info.clientName" />
          </el-descriptions-item>
          <el-descriptions-item label="渠道">
            <span v-text="info.channelName" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="期数">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="转换天数">
            <span v-text="info.periods*30" />
          </el-descriptions-item>
          <el-descriptions-item label="综合利率">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="罚息计算方式">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="居间服务费">
            <span v-text="(info.servCharge*100).toFixed(1)" />%
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="客户信息" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">客户信息</p>
          </template>
          <el-descriptions-item label="客户姓名">
            <span v-text="info.clientName" />
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">
            <span v-text="info.phone" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="银行卡号">
            <span v-text="info.bankCardNo" />
          </el-descriptions-item>
          <el-descriptions-item label="银行">
            <span v-text="info.bankName" />
          </el-descriptions-item>
          <el-descriptions-item label="客户备注">
            <span v-text="info.remark" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-descriptions title="渠道信息" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">渠道信息</p>
          </template>
          <el-descriptions-item label="渠道名">
            <span v-text="info.channelName" />
          </el-descriptions-item>
          <el-descriptions-item label="结算帐期">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="联系人">
            <span v-text="info.linkman" />
          </el-descriptions-item>
          <el-descriptions-item label="联系人电话">
            <span v-text="info.phoneNum" />
          </el-descriptions-item>
          <el-descriptions-item label="业务员">
            <span v-text="info.userName" />
          </el-descriptions-item>
          <el-descriptions-item label="业务员电话">
            <span v-text="info.phoneNumber" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">还款计划</p>
          <el-table :data="tableData" border style="width: 100%" label-class-name="con">
            <el-table-column prop="" label="期数" />
            <el-table-column prop="" label="账单日期" width="180" />
            <el-table-column prop="" label="本金" />
            <el-table-column prop="" label="利息" />
            <el-table-column prop="" label="罚息" />
            <el-table-column prop="" label="待还金额" />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">授信历史</p>
          <el-table :data="tableData" border style="width: 100%" label-class-name="con">
            <el-table-column prop="" label="期数" />
            <el-table-column prop="" label="账单日期" width="180" />
            <el-table-column prop="" label="本金" />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">修改记录</p>
          <el-table :data="tableData" border style="width: 100%" label-class-name="con">
            <el-table-column prop="" label="姓名" />
            <el-table-column prop="" label="修改内容" width="180" />
            <el-table-column prop="" label="修改时间" />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="btn">

      <el-col :span="1.5">
        <el-button v-hasPermi="['system:post:add']" type="primary" plain size="max" @click="eidtCollection()">
          催收负责人</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:post:add']" type="primary" plain size="max" @click="abandonCollection()">
          放弃催收</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:post:add']" type="primary" plain size="max" @click="clientRemark()">
          客户备注</el-button>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open1" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="选择催收员：" prop="collection">
          <el-select v-model="form.collection" placeholder="请选择" clearable style="width: 260px">
            <el-option v-for="item in collectionOPtions" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编辑备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
 
        <el-form-item label="放弃原因" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="open3" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="编辑客户备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="cancel3">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { findPaidOrderById } from '@/api/paidOrder'
export default {
  name: 'LendingOrderDetail',
  dicts: ['loan_info_payment_method', 'loan_info_applicant_status', 'loan_info_credit_status'],
  data() {
    return {
      paidOrderId: undefined,
      collectionOPtions: [],
      loading: true,
      open1: false,
      open2: false,
      open3: false,
      title: '',
      form: [
        {
          id: undefined,
          collection: undefined,
          remark: undefined
        }
      ],
      info: [
      ],
      id: undefined,
      tableData: [],
      allData: [
        {
          title: '',
          data: []
        }
      ]
    }
  },
  created() {
    this.paidOrderId = this.$route.query.id
    console.log(this.paidOrderId)
    this.getList(this.paidOrderId)
  },
  methods: {
    getList(id) {
      findPaidOrderById(id).then(res => {
        this.info = res.data
      }).catch()
    },
    eidtCollection(){
      this.reset()
      this.open1 = true
      this.title = '编辑催收人'
    },
    abandonCollection(){
      this.reset()
      this.open2 = true
      this.title = '放弃催收'
    },
    clientRemark(){
      this.reset()
      this.open3 = true
      this.title = '编辑客户备注'
    },
    cancel1() {
      this.open1 = false
      this.reset()
    },
    cancel2() {
      this.open2 = false
      this.reset()
    },
    cancel3() {
      this.open3 = false
      this.reset()
    },
    reset() {
      this.form = {
        id: undefined,
        status: '0',
        creditChannel: undefined
      }
      this.resetForm('form')
    },
    submitForm1: function() {
      this.open1=false;
    },
    submitForm2: function() {
      this.open2=false;
    },
    submitForm3: function() {
      this.open3=false;
    },
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

.long {
  width: 1050px;
  margin-left: 50px;
}

.short {
  float: left;
  /* width: 450px; */
  margin-left: 50px;
}

.title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
}

.secondTitle {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
  background-color: aqua;
  height: 35px;
}

.con {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}

.btn {
  height: 40px;
  position: fixed;
  bottom: 0;
  padding: 8px;
  text-align: right;

}
</style>
